<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权限管理 - 权限事务缓存系统</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .card {
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .table th, .table td {
            vertical-align: middle;
        }
        .badge-menu {
            background-color: #0d6efd;
        }
        .badge-button {
            background-color: #198754;
        }
        .badge-api {
            background-color: #0dcaf0;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/permission-system">权限事务缓存系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/permission-system">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/permission-system/users">用户管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/permission-system/roles">角色管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/permission-system/permissions">权限管理</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container my-5">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">
                    <i class="fas fa-key mr-2"></i>权限管理
                </h4>
            </div>
            <div class="card-body">
                <!-- 错误提示区域 -->
                <div id="permissionError" class="alert alert-warning alert-dismissible fade" role="alert" style="display: none;">
                    <strong>提示：</strong>
                    <span></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>

                <!-- 权限列表表格 -->
                <div class="table-responsive">
                    <table class="table table-hover table-sm">
                        <thead>
                            <tr class="bg-light">
                                <th scope="col">权限ID</th>
                                <th scope="col">权限名称</th>
                                <th scope="col">权限标识</th>
                                <th scope="col">权限类型</th>
                                <th scope="col">URL</th>
                                <th scope="col">请求方法</th>
                                <th scope="col">父级ID</th>
                                <th scope="col">排序</th>
                                <th scope="col">图标</th>
                                <th scope="col">描述</th>
                                <th scope="col">状态</th>
                                <th scope="col">创建时间</th>
                                <th scope="col">更新时间</th>
                            </tr>
                        </thead>
                        <tbody id="permissionTableBody">
                            <!-- 权限数据将通过JavaScript动态加载 -->
                            <tr>
                                <td colspan="13" class="text-center">
                                    <div class="spinner-border" role="status">
                                        <span class="visually-hidden">加载中...</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadPermissions();
        });

        // 加载权限列表
        function loadPermissions() {
            fetch('/permission-system/api/permissions')
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        renderPermissionTable(data.data);
                    } else {
                        showToast('加载权限列表失败: ' + data.message, 'error');
                    }
                })
                .catch(error => {
                    console.error('加载权限失败:', error);
                    showToast('加载权限列表失败，请检查网络连接', 'error');
                });
        }

        // 渲染权限表格
        function renderPermissionTable(permissions) {
            const tableBody = document.getElementById('permissionTableBody');
            tableBody.innerHTML = '';
            
            if (permissions && permissions.length > 0) {
                permissions.forEach(permission => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${permission.id}</td>
                        <td>${permission.name}</td>
                        <td>${permission.code || '-'}</td>
                        <td>
                            <span class="badge bg-${getTypeBadgeClass(permission.type)}">
                                ${getTypeName(permission.type)}
                            </span>
                        </td>
                        <td>${permission.url || '-'}</td>
                        <td>${permission.method ? 
                            `<span class="badge bg-secondary">${permission.method}</span>` : '-'}</td>
                        <td>${permission.parentId || '-'}</td>
                        <td>${permission.sort || '-'}</td>
                        <td>${permission.icon ? 
                            `<i class="fas ${permission.icon}"></i>` : '-'}</td>
                        <td>${permission.description || '-'}</td>
                        <td>${permission.status === 1 ? 
                            '<span class="badge bg-success">启用</span>' : 
                            '<span class="badge bg-danger">禁用</span>'}</td>
                        <td>${permission.createTime || '-'}</td>
                        <td>${permission.updateTime || '-'}</td>
                    `;
                    tableBody.appendChild(row);
                });
            } else {
                tableBody.innerHTML = `
                    <tr>
                        <td colspan="13" class="text-center">暂无权限数据</td>
                    </tr>
                `;
            }
        }

        // 获取权限类型名称
        function getTypeName(type) {
            const typeMap = {
                'menu': '菜单权限',
                'button': '按钮权限',
                'api': '接口权限'
            };
            return typeMap[type] || '未知类型';
        }

        // 获取权限类型徽章样式
        function getTypeBadgeClass(type) {
            const typeClassMap = {
                'menu': 'primary',
                'button': 'info',
                'api': 'warning'
            };
            return typeClassMap[type] || 'secondary';
        }

        // 显示提示框
        function showToast(message, type = 'info') {
            const errorDiv = document.getElementById('permissionError');
            const errorSpan = errorDiv.querySelector('span');
            
            errorSpan.textContent = message;
            
            // 设置样式
            errorDiv.className = 'alert alert-dismissible fade show';
            
            if (type === 'error') {
                errorDiv.classList.add('alert-danger');
            } else if (type === 'success') {
                errorDiv.classList.add('alert-success');
            } else if (type === 'warning') {
                errorDiv.classList.add('alert-warning');
            } else {
                errorDiv.classList.add('alert-info');
            }
            
            errorDiv.style.display = 'block';
            
            // 3秒后自动隐藏
            setTimeout(() => {
                errorDiv.classList.remove('show');
                errorDiv.style.display = 'none';
            }, 3000);
        }
    </script>
</body>
</html>